import { PureComponent } from 'react'
import { Layout } from 'antd'
import { Content, Header } from 'antd/es/layout/layout'
import ReactDom from 'react-dom'
import BMSHeader from './BMSHeader/BMSHeader'
import basicStyle from '../bms.less'
import Sider from 'antd/es/layout/Sider'
import SiderContent from './content/SiderContent'
import TableContent from './content/TableContent'
import BookInfoModal from './BookInfoModal'
import BookRecommendModal from './BookRecommendModal'
import AskFriendModal from './AskFriendModal'
import { setHeight } from '../action/action'
import { connect } from 'react-redux'
import PasswordReset from './passwordReset/PasswordReset'
import FriendRequest from './FriendRequest'

class BasicLayouts extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      height: props.height,
      width: props.width,
      headerHeight: 50,
      // sider的宽度
      siderWidth: 195,
      marginRight: 5
    }
  }

  componentDidMount () {
    const parentNode = ReactDom.findDOMNode(this).parentNode.parentNode
    const height = parentNode.offsetHeight
    const width = parentNode.offsetWidth
    const { headerHeight, siderWidth, marginRight } = this.state
    // 减去layout的margin 10px 和sider/content的padding各20px(高度)
    const contentHeight = height - headerHeight - 10
    this.setHeight(contentHeight)
    // 减去layout的margin 10px 和sider/content的padding各20px(宽度)
    const tableWidth = width - siderWidth - marginRight - 20
    this.setState({
      height,
      width,
      contentHeight,
      tableWidth
    })
  }

  setHeight = (height) => {
    const { dispatch } = this.props
    dispatch(setHeight(height))
  }

  render () {
    const { height, contentHeight, tableWidth, siderWidth, marginRight } = this.state
    return (
      <Layout style={{ height }}>
        <Header className={basicStyle.header}>
          <BMSHeader/>
        </Header>
        <Content>
          <Layout style={{ display: 'flex', flexDirection: 'row', margin: '5px 0' }}>
            <Sider
              className={basicStyle.sider}
              style={{ width: siderWidth, marginRight, height: contentHeight }}>
              <SiderContent/>
            </Sider>
            <Content
              className={basicStyle.content}
              style={{ width: tableWidth, height: contentHeight }}>
              <TableContent height={contentHeight} width={tableWidth}/>
            </Content>
          </Layout>
        </Content>
        <BookInfoModal/>
        <BookRecommendModal/>
        <AskFriendModal/>
        <PasswordReset/>
        <FriendRequest/>
      </Layout>
    )
  }
}

const mapStateToProps = () => {return {}}
export default connect(mapStateToProps)(BasicLayouts)